<template>
  <div class="singer-container">
    <!-- 筛选区域 -->
    <div class="filter-area">
      <el-input
          v-model="searchParams.artistName"
          placeholder="搜索歌手"
          class="custom-input"
          @keyup.enter="getArtistList"
      />
      <el-select
          v-model="searchParams.gender"
          placeholder="歌手类型"
          class="custom-select"
          @change="getArtistList"
      >
        <el-option label="全部" value="" />
        <el-option label="男歌手" value="0"/>
        <el-option label="女歌手" value="1"/>
        <el-option label="组合/乐队" value="2"/>
      </el-select>
      <el-select
          v-model="searchParams.area"
          placeholder="地区类型"
          class="custom-select"
          @change="getArtistList"
      >
        <el-option label="全部" value="" />
        <el-option label="中国" value="中国"/>
        <el-option label="日韩" value="日韩"/>
        <el-option label="欧美" value="欧美"/>
        <el-option label="其他" value="其他"/>
      </el-select>
      <el-button class="custom-button" type="primary" @click="resetFilter">重置</el-button>
    </div>

    <!-- 歌手列表区域 -->
    <div class="artist-list">
      <div
          v-for="(artist, index) in artistList"
          :key="artist.id"
          class="artist-item"
          @click="showArtistDetail(artist.id)"
          :style="{ animationDelay: `${index * 0.1}s` }"
      >
        <el-avatar :src="artist.avatar" class="artist-avatar" size="80"/>
        <div class="artist-name">{{ artist.artistName || '未知歌手' }}</div>
      </div>
    </div>

    <!-- 分页区域 -->
    <div class="pagination-area">
      <el-pagination
          :current-page="searchParams.pageNum"
          :page-size="searchParams.pageSize"
          :page-sizes="[12, 24, 36]"
          :total="total"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          class="custom-pagination"
      />
    </div>

    <!-- 歌手详情模态框 -->
    <el-dialog
        v-model="dialogVisible"
        title="歌手详情及歌曲列表"
        width="80%"
        :before-close="() => (dialogVisible = false)"
        class="custom-dialog"
    >
      <div v-if="currentArtistDetail" class="dialog-content">
        <!-- 歌手基本信息 -->
        <div class="artist-meta">
          <el-avatar :src="currentArtistDetail.avatar" class="dialog-avatar" size="120"/>
          <div class="artist-info">
            <h2 class="artist-title">{{ currentArtistDetail.artistName }}</h2>
            <p class="artist-id">ID：{{ currentArtistDetail.artistId }}</p>
            <p v-if="currentArtistDetail.gender !== 2" class="artist-gender">性别：{{
                currentArtistDetail.gender === 0 ? '男' : '女'
              }}</p>
            <p v-else class="artist-gender">类型：组合乐队</p>
            <p class="artist-area">地区：{{ currentArtistDetail.area }}</p>
            <p class="artist-desc">{{ currentArtistDetail.introduction }}</p>
          </div>
        </div>

        <!-- 歌曲列表 -->
        <div class="song-list">
          <h3 class="song-list-title">歌曲列表 ({{ currentArtistDetail.songs?.length || 0 }})</h3>
          <el-table :data="currentArtistDetail.songs || []" border class="custom-table">
            <el-table-column label="序号" type="index" width="60"/>
            <el-table-column label="歌曲名称" prop="songName"/>
            <el-table-column label="操作">
              <template #default="scope">
                <el-button
                    class="play-button"
                    icon="el-icon-video-play"
                    size="small"
                    @click="playSong(scope.row)"
                >播放
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button class="dialog-close-btn" @click="dialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
// import axios from 'axios';
import http from "@/request/http.js";
import {ElMessage} from 'element-plus';
import {usePlayer} from '@/utils/player.js';

const {playSong: playSongInPlayer} = usePlayer();

export default {
  data() {
    return {
      searchParams: {
        pageNum: 1,
        pageSize: 12,
        artistName: '',
        gender: '',
        area: '',
      },
      artistList: [],
      total: 0,
      dialogVisible: false,
      currentArtistDetail: null,
    };
  },
  mounted() {
    this.getArtistList();
  },
  methods: {
    async getArtistList() {
      try {
        const response = await http.post(
            '/artist/getAllArtists',
            this.searchParams
        );
        if (response.code === 0) {
          this.artistList = response.data.items;
          this.total = response.data.total;
        } else {
          this.$message.error(response.message || '获取歌手列表失败');
        }
      } catch (error) {
        this.$message.error('网络请求错误');
        console.error(error);
      }
    },

    playSong(song) {
      if (!song) return;
      window.dispatchEvent(new CustomEvent('playSong', {detail: song}));
      playSongInPlayer(song, this.currentArtistDetail?.songs || []);
      ElMessage.success(`正在播放：${song.songName} - ${song.artistName}`);
    },

    resetFilter() {
      this.searchParams = {
        pageNum: 1,
        pageSize: 12,
        artistName: '',
        gender: '',
        area: '',
      };
      this.getArtistList();
    },
    handleSizeChange(val) {
      this.searchParams.pageSize = val;
      this.getArtistList();
    },
    handleCurrentChange(val) {
      this.searchParams.pageNum = val;
      this.getArtistList();
    },
    async showArtistDetail(artistId) {
      try {
        const response = await http.get(`/artist/getArtistDetail/${artistId}`);
        if (response.code === 0) {
          this.currentArtistDetail = response.data;
          this.dialogVisible = true;
        } else {
          this.$message.error(response.message || '获取歌手详情失败');
        }
      } catch (error) {
        this.$message.error('网络请求错误');
        console.error(error);
      }
    },
  },
};
</script>

<style scoped>
/* 全局容器 */
.singer-container {
  padding: 2rem;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;
}

/* 筛选区域 */
.filter-area {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  padding: 1rem 2rem;
  background: white;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.custom-input,
.custom-select {
  border: 1px solid #e0e0e0;
  border-radius: 0.375rem;
  transition: all 0.3s ease;
}

.custom-input:focus,
.custom-select:focus {
  border-color: #4096ff;
  box-shadow: 0 0 0 2px rgba(64, 150, 255, 0.2);
}

.custom-button {
  background: #4096ff;
  border: none;
  border-radius: 0.375rem;
  color: white;
  transition: all 0.3s ease;
}

.custom-button:hover {
  background: #2684ff;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(64, 150, 255, 0.3);
}

/* 歌手列表 */
.artist-list {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 2rem;
}

.artist-item {
  width: 120px;
  text-align: center;
  cursor: pointer;
  background: white;
  padding: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  animation: fadeIn 0.5s ease forwards;
  opacity: 0;
}

.artist-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

.artist-avatar {
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.artist-name {
  margin-top: 0.5rem;
  font-weight: 500;
  color: #333;
}

/* 分页 */
.pagination-area {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

.custom-pagination {
  border-radius: 0.375rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* 弹窗 */
.custom-dialog {
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.dialog-content {
  padding: 2rem;
}

.artist-meta {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  margin-bottom: 2rem;
}

.dialog-avatar {
  border: 3px solid white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.artist-info {
  flex: 1;
}

.artist-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #333;
}

.artist-id,
.artist-gender,
.artist-area {
  margin-bottom: 0.5rem;
  color: #666;
}

.artist-desc {
  line-height: 1.6;
  color: #444;
}

.song-list {
  margin-top: 2rem;
}

.song-list-title {
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 1rem;
  color: #333;
}

.custom-table {
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.play-button {
  background: #4096ff;
  color: white;
  border: none;
  transition: all 0.3s ease;
}

.play-button:hover {
  background: #2684ff;
  transform: translateY(-2px);
  box-shadow: 0 2px 6px rgba(64, 150, 255, 0.3);
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  padding: 1rem 2rem;
  border-top: 1px solid #e0e0e0;
}

.dialog-close-btn {
  background: #f0f0f0;
  color: #666;
  border: none;
  border-radius: 0.375rem;
  transition: all 0.3s ease;
}

.dialog-close-btn:hover {
  background: #e0e0e0;
  color: #333;
}

/* 动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>